<template>
	<view class="main">
		<view class="bg">
			<image src="/static/mine/txbg.png" mode="aspectFill" />

			<view class="content">
				<view class="title">请输入本次提现金额</view>
				<view class="ipt-box dispaly-center">
					<view class="m-icon">
						<image src="/static/mine/qian.png" mode="aspectFill" />
					</view>
					<view class="ipt">
						<input type="digit" placeholder="0.0" v-model="formData.price" />
					</view>
				</view>
				<view class="tip">可提现金额（元）{{ userInfo.balance || 0 }}</view>
				<view class="from dispaly-center">
					<view class="from-icon">
						<image src="/static/mine/txwx.png" mode="aspectFill" />
					</view>
					<view class="from-tip">到微信</view>
				</view>
			</view>
		</view>
	</view>
	<view class="btn-box">
		<view class="item-box dispaly-just-between">
			<view class="item">
				<view class="b-txt dispaly-align-center" @click="getWithdrawal">提现</view>
				<image src="/static/icon/jd-btn.png" mode="aspectFill" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { withdrawal, getUserInfo } from '@/api/apiList';
import { onLoad } from '@dcloudio/uni-app';
import { debounce } from '@/utils/util';

const formData = reactive({
	price: ''
});

// 提现
const getWithdrawal = debounce(async () => {
	if (!userInfo.value.balance)
		return uni.showToast({
			title: '无可提现金额',
			icon: 'none'
		});

	if (formData.price) {
		await uni.showLoading({
			title: '操作中'
		});
		const result = await withdrawal(formData);
		if (result.code != 200)
			return uni.showToast({
				title: '提现接口错误',
				icon: 'none'
			});

		if (uni.canIUse('requestMerchantTransfer')) {
			uni.requestMerchantTransfer({
				mchId: '1706453053',
				appId: uni.getAccountInfoSync().miniProgram.appId,
				package: result.data.packageInfo,
				success: (res) => {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});
					uni.hideLoading();
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				},
				fail: (res) => {
					uni.hideLoading();
				}
			});
		} else {
			uni.showToast({
				title: '提现失败',
				icon: 'none'
			});
		}
	}
});

const userInfo = ref({});
const getUserData = async () => {
	const res = await getUserInfo();
	if (res.code == 200) {
		userInfo.value = res.data;
	}
};

onLoad(() => {
	getUserData();
});
</script>

<style lang="scss" scoped>
.main {
	padding: 30rpx;
}
.bg {
	width: 690rpx;
	height: 482rpx;
	background-color: #ffd257;
	position: relative;
	image {
		width: 690rpx;
		height: 482rpx;
	}
}

.content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 40rpx;
	.title {
		font-family: IPix;
		font-size: 28rpx;
		color: #000000;
	}
	.ipt-box {
		margin-top: 40rpx;
		border-bottom: 1rpx solid #e6bd4e;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		.m-icon {
			margin-right: 40rpx;
			image {
				width: 42rpx;
				height: 58rpx;
			}
		}
		.ipt {
			input {
				font-family: IPix;
				font-size: 50rpx;
				color: #4e3b0c;
				height: 58rpx;
			}
		}
	}
	.tip {
		color: #83681c;
		font-size: 28rpx;
		font-family: IPix;
	}
	.from {
		margin-top: 130rpx;
		.from-icon {
			margin-right: 20rpx;
			image {
				width: 70rpx;
				height: 42rpx;
			}
		}
		.from-tip {
			font-family: IPix;
			font-size: 28rpx;
			color: #000000;
		}
	}
}

.btn-box {
	border: 6rpx solid #4e3b0c;
	border-bottom: none;
	width: 100%;
	height: 174rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffd257;
	box-sizing: border-box;
	.item-box {
		padding: 18rpx 26rpx 0 26rpx;
		.item {
			position: relative;
			width: 692rpx;
			height: 82rpx;
			image {
				position: absolute;
				z-index: -1;
				left: 0;
				right: 0;
				top: 0;
				width: 692rpx;
				height: 82rpx;
			}
			.b-txt {
				font-family: IPix;
				font-size: 36rpx;
				color: #ffd257;
				width: 692rpx;
				height: 82rpx;
			}
		}
	}
}
</style>
